<template>
  <div class="content-box">
    <div class="header-box">
      <div class="title-box">
        <span class="title">{{ rule.ruleName }}</span>
      </div>
      <span class="dmc-sub-title dm-pl8"> 规则标识: {{ rule.ruleIdentification }}</span>
      <span class="dmc-sub-title dm-pl8 dmc-dev-amount"> 规则状态: {{ rule.status == 0 ? '启用' : '禁用' }}</span>
      <div class="back-box" @click="goBack">
        <img src="@/assets/images/c6/back.png" class="icon">
        <span class="back">返回</span>
      </div>
    </div>
    <div class="container-box">
      <div class="title-box">
        <div class="content-header-vertical-bar" />
        <span class="title">基本信息</span>
      </div>
      <div class="context-box">
        <el-form label-width="120px">
          <el-row style="display: flex;justify-content: space-around;">
            <el-col :span="10">
              <el-form-item label="规则名称：">{{ rule.ruleName }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="规则状态：">{{ rule.status == 0 ? '启用' : '禁用' }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="触发机制：">{{ rule.triggeringName }}</el-form-item>
            </el-col>
          </el-row>
          <el-row style="display: flex;justify-content: space-around;">
            <el-col :span="10">
              <el-form-item label="触发产品：">{{ product.productName }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="触发产品服务：">{{ service.serviceName }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="触发设备：">{{ device.deviceName }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="edit-btn-box">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="danger"
            @click="handleUpdate">
            更新规则信息
          </el-button>
        </div>
      </div>
    </div>
    <div class="container-box" style="margin-top: 15px;">
      <div class="title-box">
        <div class="content-header-vertical-bar" />
        <span class="title">触发条件</span>
      </div>
    </div>

    <base-dialog :close-on-click-modal="false" :title="updateDialog.title" :visible.sync="updateDialog.open" append-to-body width="500px" @updateData="submitForm" @closed="cancel">
      <el-form ref="form" :model="updateDialog.form" :rules="updateDialog.rules" label-width="120px">
        <el-row>
          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="updateDialog.form.ruleName" placeholder="请输入规则名称" />
          </el-form-item>
          <el-form-item label="规则状态" prop="deviceStatus">
            <el-select v-model="updateDialog.form.status" placeholder="请选择状态">
              <el-option v-for="item in dict.type.common_status" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="触发产品" prop="productIdentification">
              <el-select v-model="updateDialog.form.productIdentification" placeholder="请选择触发产品" @change="getServicesByProductIdentification">
                <el-option v-for="item in productList" :key="item.productIdentification" :label="item.productName" :value="item.productIdentification" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="触发服务" prop="ruleName">
            <el-select v-model="updateDialog.form.serviceId" placeholder="请选择触发服务">
              <el-option v-for="item in services" :key="item.id" :label="item.serviceName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="触发设备" prop="deviceStatus">
            <el-select v-model="updateDialog.form.status" placeholder="请选择触发设备">
              <el-option v-for="item in dict.type.common_status" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="规则描述" prop="remark">
              <el-input v-model="updateDialog.form.remark" placeholder="请输入规则描述" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { getListPage, getById, addRule, updateRule, deleteById } from '@/api/cms/winglinks/rule'
import { getProductByProductIdentification, getAllProduct } from '@/api/cms/winglinks/product'
import { getServiceById, getServicesByProductIdentification } from '@/api/cms/winglinks/product/services'
import { getDeviceInfoByDeviceIdentification } from '@/api/cms/winglinks/device'
export default {
  name: 'RuleDetail',
  dicts: ['common_status'],
  data() {
    return {
      ruleId: undefined,
      ruleIdentification: undefined,
      rule: undefined,
      product: undefined,
      service: undefined,
      device: {
        deviceName: '所有设备'
      },
      services: [],
      productList: [],
      updateDialog: {
        title: null,
        open: false,
        // 表单参数
        form: {
          id: null,
          ruleName: null,
          status: null,
          productIdentification: null,
          serviceId: null,
          deviceIdentification: null,
          remark: null
        }
      }
    }
  },
  watch: {
    '$route.query'() {
      console.log('watch', this.$route.query)
      const ruleId = this.$route.query.id
      const ruleIdentification = this.$route.query.ruleIdentification
      if (ruleIdentification) {
        this.ruleIdentification = ruleIdentification
      }
      if (ruleId) {
        this.ruleId = ruleId
        this.getRuleDetail()
      }
    }
  },
  mounted() {
    const ruleId = this.$route.query.id
    const ruleIdentification = this.$route.query.ruleIdentification
    if (ruleIdentification) {
      this.ruleIdentification = ruleIdentification
    }
    if (ruleId) {
      this.ruleId = ruleId
      this.getRuleDetail()
    }
    this.getAllProduct()
  },
  activated() {
    const ruleId = this.$route.query.id
    if (ruleId) {
      this.ruleId = ruleId
      this.getRuleDetail()
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getAllProduct() {
      getAllProduct().then(res => {
        this.productList = res.data
      })
    },
    getRuleDetail() {
      getById(this.ruleId).then(res => {
        if (res.data) {
          this.rule = res.data
          this.getProductByproductIdentification()
          this.getProductServiceByServiceId()
          this.getDeviceByDeviceIdentification()
          this.getServicesByProductIdentification(this.rule.productIdentification)
        }
      })
    },
    getProductByproductIdentification() {
      if (this.rule.productIdentification) {
        const query = {
          productIdentification: this.rule.productIdentification
        }
        getProductByProductIdentification(query).then(res => {
          this.product = res.data
        })
      }
    },
    getProductServiceByServiceId() {
      if (this.rule.serviceId) {
        getServiceById(this.rule.serviceId).then(res => {
          this.service = res.data
        })
      }
    },
    getDeviceByDeviceIdentification() {
      if (this.rule.deviceIdentification) {
        getDeviceInfoByDeviceIdentification(this.rule.deviceIdentification).then(res => {
          this.device = res.data
        })
      }
    },
    getServicesByProductIdentification(val) {
      console.log(111, val)
      if (val) {
        this.updateDialog.form.serviceId = null
        getServicesByProductIdentification(val).then(res => {
          this.services = res.data
        })
      }
    },
    handleUpdate() {
      this.reset()
      this.updateDialog.form = this.rule
      this.updateDialog.open = true
      this.updateDialog.title = '修改规则'
    },
    // 表单重置
    reset() {
      this.updateDialog.form = {
        id: null,
        ruleName: null,
        status: null,
        remark: null
      }
    },
    // 取消按钮
    cancel() {
      this.updateDialog.open = false
      this.reset()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.updateDialog.form.id != null) {
            updateRule(this.updateDialog.form).then((response) => {
              this.updateDialog.open = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getRuleDetail(this.updateDialog.form.id)
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/.el-card__header{
    background-color: #ffffff;
  }
  .content-box{
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  .title-box{
    display: flex;
    flex-direction: row;
    height: 26px;
    align-items: center;
    margin-bottom: 12px;
    .content-header-vertical-bar{
      width: 7px;
      height: 26px;
      background: #409eff;
      border-radius: 4px;
      margin-right: 10px;
    }
    .title{
      margin-right:7px;
      font-weight: 700;
      font-size: 18px;
    }
  }
  .header-box{
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 0 4px #00000026;
    margin-bottom: 15px;
    .dmc-sub-title {
      font-size: 16px;
      color: #8a8e99;
    }
    .dm-font16 {
      margin-left: .5rem;
      padding-left: .5rem;
      border-left: 1px solid #dfe1e6;
    }
    .dm-bold {
      font-weight: 700;
    }
    .dm-p18 {
      padding-left: .5rem !important;
    }
    .dmc-dev-amount {
      margin-left: .5rem;
      padding-left: .5rem;
      border-left: 1px solid #dfe1e6;
    }
    .back-box{
      align-items: center;
      display: flex;
      flex-direction: row;
      position: absolute;
      right: 20px;
      top: 20px;
      .icon{
        margin-right: 5px;
        height: 25px;
        width: auto;
      }
      .back{
        font-size: 16px;
        color: #409EFF;
      }
    }
  }

  .container-box{
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 0 4px #00000026;
    .row{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .edit-btn-box{
      position: absolute;
      top: 18px;
      right: 18px;
    }
  }

  .row1{
    width: 100%;
    height: 17%;
    margin-bottom: 20px;
    .chart-wrapper{
      width: 100%;
      height: 100%;
    }
    .box-card{
      width: 100%;
      height: 100%;
      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }
</style>
